<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner slider step05</title>
<!-- 
	step01 - 레이아웃 구성
	step02 - 이미지 전환
	step03 - 인덱스 컨트롤
	step04 - 애니메이션 적용
	step05 - 자동실행
 -->
 <style type="text/css">
 	*{ padding: 0; margin: 0; }
 	.banner_slider_container *{
 		border: 1px solid black;
 		display: inline-block;
 		vertical-align: middle;
 	}
 	.banner_container{
 		width: 256px;
 		height: 256px;
 		position: relative;
 		overflow: hidden;
 	}
 	.banner_container img{
 		position: absolute;
 	}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
 <script type="text/javascript">
 	$(document).ready( function(){
 		var $conainer = $( ".banner_slider_container" );
 		var $imageList = $( ".banner_container img" );
 		var $currentImage;
 		var imageCount = $imageList.length;
 		var currentIndex = 0;
 		var centerX = 0;
 		var prevX = -256;
 		var nextX = 256
 		var moveSpeed = 500;
 		var direction;
 		var timerId;
 		
 		initImage();
 		initEvent();
 		startTimer();
 		
 		function initImage(){
 			$imageList.css( {"left":256})
 			$currentImage = $imageList.eq( currentIndex );
 			$currentImage.css( { "left":0 });
 		}
 		
 		function initEvent(){
 			var tempIndex;
 			$( ".prev_arrow" ).on( "click", function( event ){ prev(); });
			$( ".next_arrow" ).on( "click", function( event ){ next(); });
			$conainer.on( "mouseover", function( event ){ stopTimer(); } );
			$conainer.on( "mouseout", function( event ){ startTimer(); } );
 		}
 		
 		function startTimer(){
 			timerId = setInterval( intervalHandler, 3000 );
 		}
 		
 		function stopTimer(){
 			clearInterval( timerId );
 		}
 		
 		function intervalHandler(){
 			next();
 		}
 		
 		function next(){
 			direction = "R";
 			currentIndex = currentIndex >= imageCount-1 ? 0 : currentIndex+1;
 			updateCurrentImage();
 		}
 		
 		function prev(){
 			direction = "L";
 			currentIndex = currentIndex > 0 ? currentIndex-1 : imageCount-1;
 			updateCurrentImage();
 		}
 		
 		function updateCurrentImage(){
 			if($currentImage){
 				hide( $currentImage );
 			}
 			
 			$currentImage = $imageList.eq( currentIndex );
 			show( $currentImage );
 		}
 		
 		function show( $target ){
 			$target.stop();
 			var targetX = ( direction == "R" ) ? prevX : nextX;
 			$target.css( { "left": targetX, "z-index":1000  }).animate( { left: centerX }, moveSpeed );
 		}
 		
 		function hide( $target ){
 			$target.stop();
 			var targetX = ( direction == "R" ) ? nextX : prevX;
 			$target.animate( { left: targetX }, moveSpeed ).css( "z-index", 0 );
 		}
 	});
 </script>
</head>
<body>
	<div class="banner_slider_container">
		<img alt="" class="prev_arrow" src="img/prev_arrow.png">
		<div class="banner_container">
			<img alt="" src="img/img01.png">
			<img alt="" src="img/img02.png">
			<img alt="" src="img/img03.png">
			<img alt="" src="img/img04.png">
			<img alt="" src="img/img05.png">
		</div>		
		<img alt="" class="next_arrow" src="img/next_arrow.png">
	</div>
</body>
</html>